import React from 'react'
// home页面为主页，tarBar存放在这边

// tarBar使用到了嵌套路由的技术
// 1.1.引入route组件
import { Route } from 'react-router-dom'
// 1.2 导入子组件
import Index from '../Index/index'
import News from '../News/index'
import HouseList from '../HouseList'
import profile from '../profile'
import './index.css'
import { TabBar } from 'antd-mobile';
export default class Home extends React.Component {
    state = {
        selectedTab: this.props.location.pathname,  //默认选中
        hidden: false,    //是否隐藏
    }

    render() {
        return (
            // ❗❗❗展示到页面的区域
            <div className="home">
                {/* 1.3 渲染子组件 */}
                <Route exact path="/Home" component={Index}></Route>
                <Route path="/Home/News" component={News}></Route>
                <Route path="/Home/HouseList" component={HouseList}></Route>
                <Route path="/Home/profile" component={profile}></Route>

                {/* 导入tarBar组件 */}
                <div style={{ position: 'fixed', width: '100%', bottom: 0 }}>
                    <TabBar
                        // 未选中的颜色
                        unselectedTintColor="#949494"
                        //选中的字体颜色
                        tintColor="#21b97a"
                        //tabbar 背景色
                        barTintColor="white"
                        hidden={this.state.hidden}
                        noRenderContent={true}
                    >
                        <TabBar.Item
                            title="首页"
                            icon={
                                <i className="iconfont icon-ind"></i>
                            }
                            selectedIcon={
                                <i className="iconfont icon-ind"></i>
                            }
                            selected={this.state.selectedTab === '/Home'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/Home',
                                });
                                this.props.history.push('/Home')
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icon-findHouse"></i>
                            }
                            selectedIcon={
                                <i className="iconfont icon-findHouse"></i>
                            }
                            title="找房"
                            selected={this.state.selectedTab === '/Home/HouseList'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/Home/HouseList',
                                });
                                this.props.history.push('/Home/HouseList')
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icon-infom"></i>
                            }
                            selectedIcon={
                                <i className="iconfont icon-infom"></i>
                            }
                            title="咨询"
                            selected={this.state.selectedTab === '/Home/News'}
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/Home/News',
                                });
                                this.props.history.push('/Home/News')
                            }}
                        >
                        </TabBar.Item>
                        <TabBar.Item
                            icon={
                                <i className="iconfont icon-my"></i>
                            }
                            selectedIcon={
                                <i className="iconfont icon-my"></i>
                            }
                            title="我的"
                            // 是否选中
                            selected={this.state.selectedTab === '/Home/profile'}
                            // 点击触发
                            onPress={() => {
                                this.setState({
                                    selectedTab: '/Home/profile',
                                });
                                this.props.history.push('/Home/profile')
                            }}
                        >
                        </TabBar.Item>
                    </TabBar>
                </div>

            </div>
        )
    }
}
